<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>手机商品信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        .price {
            color: #e74c3c;
            font-weight: bold;
        }
        .action-buttons {
            margin-top: 20px;
            text-align: right;
        }
        .action-buttons button {
            padding: 8px 16px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .action-buttons button:hover {
            background-color: #45a049;
        }
        #deleteBtn {
            background-color: #f44336;
        }
        #deleteBtn:hover {
            background-color: #d32f2f;
        }
        #editBtn {
            background-color: #2196F3;
        }
        #editBtn:hover {
            background-color: #0b7dda;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .page-btn {
            padding: 6px 12px;
            margin: 0 5px;
            border: 1px solid #ddd;
            background-color: #fff;
            cursor: pointer;
            border-radius: 4px;
        }
        .page-btn:hover {
            background-color: #f1f1f1;
        }
        .page-btn.active {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }
        .page-numbers {
            display: flex;
        }

        @media screen and (max-width: 768px) {
            .table-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            body {
                margin: 10px;
                padding: 0;
            }
            h1 {
                font-size: 20px;
                margin: 10px 0;
            }
            table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            .action-buttons {
                flex-direction: column;
                align-items: stretch;
            }
            .action-buttons button {
                margin: 5px 0;
                width: 100%;
            }
            .pagination {
                flex-wrap: wrap;
            }
            .page-btn {
                margin: 2px;
                padding: 4px 8px;
                font-size: 14px;
            }
        }

        @media screen and (max-width: 480px) {
            th, td {
                display: block;
                padding: 8px;
                font-size: 14px;
            }
            .page-numbers {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
        .table-container {
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <h1>手机商品列表</h1>
    <div class="table-container">
        <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>型号</th>
                <th>品牌</th>
                <th>处理器</th>
                <th>内存</th>
                <th>存储</th>
                <th>价格</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="rowCheckbox"></td>
                <td>iPhone 15 Pro</td>
                <td>Apple</td>
                <td>A17 Pro</td>
                <td>8GB</td>
                <td>256GB</td>
                <td class="price">¥8,999</td>
                <td>120</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="rowCheckbox"></td>
                <td>Galaxy S23 Ultra</td>
                <td>Samsung</td>
                <td>Snapdragon 8 Gen 2</td>
                <td>12GB</td>
                <td>512GB</td>
                <td class="price">¥9,699</td>
                <td>85</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="rowCheckbox"></td>    
                <td>Xiaomi 13 Pro</td>
                <td>Xiaomi</td>
                <td>Snapdragon 8 Gen 2</td>
                <td>12GB</td>
                <td>256GB</td>
                <td class="price">¥4,999</td>
                <td>150</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="rowCheckbox"></td>
                <td>Mate 60 Pro</td>
                <td>Huawei</td>
                <td>Kirin 9000S</td>
                <td>12GB</td>
                <td>512GB</td>
                <td class="price">¥6,999</td>
                <td>200</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="rowCheckbox"></td>
                <td>OnePlus 11</td>
                <td>OnePlus</td>
                <td>Snapdragon 8 Gen 2</td>
                <td>16GB</td>
                <td>256GB</td>
                <td class="price">¥4,299</td>
                <td>75</td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="9">
                <div class="pagination">
                    <button class="page-btn first-page">首页</button>
                    <button class="page-btn prev-page">上一页</button>
                    <div class="page-numbers">
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                    </div>
                    <button class="page-btn next-page">下一页</button>
                    <button class="page-btn last-page">末页</button>
                </div>
            </td>
        </tr>
    </tfoot>
    </table>
    <div class="action-buttons">
        <button id="addBtn">新增</button>
        <button id="deleteBtn">删除</button>
        <button id="editBtn">修改</button>
    </div>
</body>
</html>

<script>
    // 全选/取消全选
    document.getElementById('selectAll').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.rowCheckbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    // 删除选中行
    document.getElementById('deleteBtn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
        checkboxes.forEach(checkbox => {
            checkbox.closest('tr').remove();
        });
    });

    // 新增行（简化示例）
    document.getElementById('addBtn').addEventListener('click', function() {
        const tbody = document.querySelector('tbody');
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td><input type="checkbox" class="rowCheckbox"></td>
            <td contenteditable="true">新手机</td>
            <td contenteditable="true">新品牌</td>
            <td contenteditable="true">新处理器</td>
            <td contenteditable="true">8GB</td>
            <td contenteditable="true">128GB</td>
            <td class="price" contenteditable="true">¥0</td>
            <td contenteditable="true">0</td>
        `;
        tbody.appendChild(newRow);
    });

    // 修改行（简化示例）
    document.getElementById('editBtn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
        if (checkboxes.length === 1) {
            const row = checkboxes[0].closest('tr');
            const cells = row.querySelectorAll('td:not(:first-child)');
            cells.forEach(cell => {
                cell.setAttribute('contenteditable', 'true');
            });
        } else {
            alert('请选择一行进行修改');
        }
    });

    // 分页功能
    document.querySelector('.first-page').addEventListener('click', function() {
        goToPage(1);
    });
    
    document.querySelector('.last-page').addEventListener('click', function() {
        goToPage(3); // 假设总页数为3
    });
    
    document.querySelector('.prev-page').addEventListener('click', function() {
        const current = document.querySelector('.page-numbers .active').textContent;
        if(current > 1) goToPage(parseInt(current) - 1);
    });
    
    document.querySelector('.next-page').addEventListener('click', function() {
        const current = document.querySelector('.page-numbers .active').textContent;
        if(current < 3) goToPage(parseInt(current) + 1); // 假设总页数为3
    });
    
    document.querySelectorAll('.page-numbers .page-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            goToPage(parseInt(this.textContent));
        });
    });
    
    function goToPage(pageNum) {
        // 这里应该是实际的分页逻辑
        console.log('跳转到第', pageNum, '页');
        
        // 更新活动页码样式
        document.querySelectorAll('.page-numbers .page-btn').forEach(btn => {
            btn.classList.remove('active');
            if(btn.textContent == pageNum) btn.classList.add('active');
        });
    }
</script>
